<template>
  <el-container>
    <el-header>
      <!-- 添加标题和logo区域 -->
      <el-row type="flex" align="middle" justify="space-between" class="header-title">
        <el-row type="flex" align="middle" justify="start" class="">
          <img src="../assets/logo.png" alt="校徽" class="school-logo">
          <div class="title-text">
            <h2 style="color: #6a7d50;">灵犀智医系统</h2>
            <p>Wisdom Doctor system</p>
          </div>
        </el-row>
        <el-button size="mini" type="info" @click="handleOut">退出</el-button>
      </el-row>

      <!-- 用户端头部导航 -->
      <el-row type="flex" align="middle" justify="center">
        <el-menu mode="horizontal" :default-active="defaultActive" @open="handleOpen" @close="handleClose"
                 @select="handleSelect" router>
          <el-menu-item :index="item.path" v-for="(item, index) in menuList" :key="index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.label }}</span>
          </el-menu-item>
        </el-menu>
      </el-row>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer>
      <!-- 用户端页脚 -->
      <el-row style="background-color:#20232c;height: 250px;">
        <div class="footer-content">
          <div class="footer-section">
            <h3>快速链接</h3>
            <p><a href="#">灵犀智医首页</a></p>
            <p><a href="#">中医药文化</a></p>
            <p><a href="#">智能健康咨询</a></p>
            <p><a href="#">中医养生方案</a></p>
            <p><a href="#">用户反馈</a></p>
          </div>
          <div class="footer-section">
            <h3>健康服务</h3>
            <p><a href="#">中医体质辨识</a></p>
            <p><a href="#">智能健康档案</a></p>
            <p><a href="#">中医诊疗预约</a></p>
            <p><a href="#">慢性病中医调理</a></p>
            <p><a href="#">康复指导</a></p>
          </div>
          <div class="footer-section">
            <h3>关于我们</h3>
            <p><a href="#">灵犀智医简介</a></p>
            <p><a href="#">专家团队</a></p>
            <p><a href="#">合作伙伴</a></p>
            <p><a href="#">新闻动态</a></p>
            <p><a href="#">加入我们</a></p>
          </div>
          <div class="footer-section">
            <h3>联系我们</h3>
            <p><i class="el-icon-phone"></i> 联系电话：123-4567-8900</p>
            <p><i class="el-icon-message"></i> 邮箱：lingxi@zhiyi.com.cn</p>
            <p><i class="el-icon-location-information"></i> 地址：南昌市东湖区中医药文化中心</p>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&#169; 2025 灵犀智医 版权所有</p>
        </div>
      </el-row>
    </el-footer>

  </el-container>
</template>

<script>
import {setCache, getCache} from '@/utils/useCache';

export default {
  name: 'UserLayout',
  data() {
    return {
      defaultActive: "adminHome",
      menuList: [
        {icon: 'el-icon-house', label: '首页', path: '/user/home',},
        {icon: 'el-icon-date', label: '系统公告', path: '/user/notice',},
        {icon: 'el-icon-chat-dot-square', label: '中医文化', path: '/user/news'},
        {icon: 'el-icon-wind-power', label: '中药常识', path: '/user/model'},
        {icon: 'el-icon-position', label: '健康档案', path: '/user/health',},
        {icon: 'el-icon-user', label: '个人中心', path: '/user/mine',},
      ],
    }
  },
  mounted() {
    this.defaultActive = getCache("CURRENT_MENU") + "";
  },
  methods: {
    handleSelect(key, keyPath) {
      setCache("CURRENT_MENU", key);
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOut() {
      this.$confirm('即将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push("/");
        localStorage.clear();
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped>
:deep(.el-header) {
  border-bottom: 1px solid #ccc;
  height: 150px !important;
}

:deep(.el-menu) {
  border-bottom: none;
  height: 59px;
}

:deep(.el-main),
:deep(.el-footer) {
  padding: 0;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  color: #fff;
}

.footer-section {
  text-align: left;
}

.footer-section h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;
}

.footer-section p {
  margin: 15px 0;
  font-size: 14px;
  color: #999;
}

.footer-section a {
  color: #999;
  text-decoration: none;
}

.footer-section a:hover {
  color: #fff;
}

.footer-section i {
  margin-right: 5px;
}

.footer-bottom {
  background-color: #20232c;
  text-align: center;
  padding: 10px 0;
  color: #999;
  border-top: 1px solid #333;
}

/* 添加新的样式 */
.header-title {
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.school-logo {
  height: 50px;
  width: 50px;
  margin-right: 15px;
}

.title-text {
  text-align: left;
}

.title-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.title-text p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #909399;
}
</style>
